<template>
	<view class="share page pd-30" style="min-height: 100vh;">
		<comHead :datas="datasObj"></comHead>

		<view class="data flex-eve pd-30">
			<view class="item">
				<view class="flex">
					<view class="icon"></view>
					<view class="ft ml-12">{{ "今日浏览量" }}</view>
				</view>
				<view class="ft-num mt-10">{{ msgInfo.pv_num }}</view>
			</view>
			<view class="item1">
				<view class="flex ml-20">
					<view class="icon color"></view>
					<view class="ft ml-12">{{ "今日访客" }}</view>
				</view>
				<view class="ft-num ml-20 mt-10">{{ msgInfo.un_num }}</view>
			</view>
			<view class="card pd-20">
				<view class="flex ml-20">
					<view class="icon"></view>
					<view class="ft ml-12">{{ "累计访客" }}</view>
				</view>
				<view class="ft-num ml-20 mt-10">{{ msgInfo.total_un_num }}</view>
			</view>
		</view>
		<view class="flex-bwt top mt-40">
			<view class="tabBox flex">
				<view class="tab flex-center ft ft-28" v-for="(item, index) in tabArray" :key="index"
					:class="{ active: currentTab === index }" @click="selectTab(index)">
					{{ item.desc }}
					<text class="num ft c-ff" v-if="item.num">{{ item.num }}</text>
				</view>
			</view>
			<view class="sift flex">
				<text class="line"
					style="display: inline-block;width: 2rpx;height: 28rpx;background-color: #F1F1F1;margin-right: 20rpx;"></text>
				<image class="icon_samll" src="https://cdn.oss.bon-top.cn/static_bc/images/icon16.png"></image>
				<text class="ml-10 ft" @click="isShow = !isShow">筛选</text>
				<view class="card" v-if="isShow">
					<image class="filter-bg" src="https://cdn.oss.bon-top.cn/static_bc/images/filter_share_bg.png">
					</image>
					<view class="filter-list">
						<view class="ft item c-99" v-for="(item, index) in selectArray" :key="index"
							:class="{ act: tab === index }" @click="selectItem(index)">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="">
			<view class="list mt-30" v-for="(item, index) in msgList" v-if="currentTab === 0" :key="index">
				<view class="ft flex-center c-99">{{ item.created_at }}</view>
				<view class="card3 mt-10 pd-20" @click="goDetailCard(item, item.pid)">
					<view class="second pd-20">
						<view class="flex-bwt"
							style="border-bottom: 2rpx solid #F1F1F1; padding-bottom: 20rpx;align-items: flex-start;">
							<view class="left ft">
								<view class="flex"><text
										style="display: inline-block;width: 8rpx;height: 8rpx;border-radius: 50rpx;background-color: #FF0000;margin-right: 10rpx;flex-shrink: 0;"
										v-if="item.is_read == 0"></text>
									<view class="one">
										{{ item.tag_name }}</view>
								</view>

								<view class="ft1 mt-24 ft-28  mr-10" style="word-break: break-all;">

									{{ item.share_info.name }}
								</view>
								<view class="mt-12">{{ '最近访问时间：' + item.created_at }}</view>
							</view>
							<view class="right">
								<image class="wh-100 bd-r40" mode="aspectFill" :src="item.share_info.cover"></image>
								<image class="wh-36 tubiao" src="https://cdn.oss.bon-top.cn/static_bc/images/paly_m.png"
									v-if="item.share_info.video_id > 0"></image>
							</view>
						</view>
						<view class="flex-bwt mt-12">
							<view class="word">
								<text class="ft">访问次数：</text>
								<text class="ft c-bbq">{{ item.pv_num }}次</text>
								<text class="ft ml-8 mr-8">|</text>
								<text class="ft">访问人数：</text>
								<text class="ft c-bbq">{{ item.user_num }}人</text>
							</view>
							<view class="picture flex">
								<image class="wh-48 img bd-r50c" :src="v" mode="aspectFill" style="margin-left: -24rpx;"
									v-for="(v, i) in item.user_imgs" :key="i"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list mt-20" v-for="(item, index) in msgList" v-if="currentTab === 1" :key="index">
				<view class="ft flex-center c-99">{{ item.created_at }}</view>
				<view class="card3 mt-12 pd-20">
					<view class="first pd-20">
						<view class="flex" style="align-items: flex-start;">
							<image style="border-radius: 50%;flex-shrink: 0;" class="wh-68 mr-20"
								:src="item.user_info.avatar"></image>
							<view>
								<view class="flex" style="align-items: flex-start;">
									<view class="ft1" style="word-break: break-all;">{{ item.user_info.nickname }}
									</view>
									<view class="flex hots">
										<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/fire.png">
										</image>
										<view class="ft ft-20">热度{{ item.user_info.pv_num }}</view>
									</view>
								</view>
								<view class="ft mt-10">访问次数：<text class="c-66">{{ item.user_info.pv_num }}次</text>
								</view>
							</view>
						</view>
						<view class="ft mt-10 ml-90">最近访问：<text class="c-66">{{ item.user_info.product_name }}</text>
						</view>
						<view class="ft c-99 mt-12 ml-90">{{ '时间：' + item.created_at + ' | 时长：' +
							item.user_info.seconds_txt
						}}</view>
					</view>
					<view class="btn2 flex-center" @click="goDetail(item, item.user_id)">
						<text class="ft c-33">访问明细</text>
						<image class="wh-24 ml-10" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class="com-empty" v-if="msgList.length == 0">暂无数据</view>

		<view style="height: 184rpx;"></view>
		<view class="btnGroup">
			<view class="btn1 flex-center">
				<view class="noRead flex-center" @click="show = true">{{ "一键标记已读" }}</view>
			</view>
		</view>
		<up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="show"
			:title="title" :showCancelButton="true" :content='content'></up-modal>

	</view>
</template>

<script lang="js" setup>
import {
	ref,
	reactive
} from "vue";
import {
	onShow,
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
	title: '分享互动消息',
	img: '',
	color: '#FFFFFF',
	direction: '',
	scrollTop: 0,
	noBack: false,
	isBorder: true
})
const isShow = ref(false)
const tabArray = ref([{
	desc: '按分享浏览',
	num: 0
}, {
	desc: '按访客浏览',
	num: 0
}]);
const currentTab = ref(0);
const selectTab = (index) => {
	isShow.value = false
	currentTab.value = index;
	reloadData()
};

const selectArray = ref([
	'视频',
	'项目',
	'评论',
	'老师',
	'文章',
	'案例',
	'活动',
])

const tab = ref(-1)
const selectItem = (idnex) => {
	if (tab.value === idnex) {
		tab.value = -1;
	} else {
		tab.value = idnex;
	}
	isShow.value = false
	reloadData()
}

const reloadData = () => {
	msgPage.value = 1
	msgList.value = []
	msgLoading.value = true
	getMsgListData()
}

//获取消息列表
const msgPage = ref(1)
const msgList = ref([])
const msgLoading = ref(true)
const msgInfo = ref({})
const getMsgListData = () => {
	if (!msgLoading.value) {
		return
	}
	uni.showLoading()
	msgLoading.value = false
	utils
		.request(
			api.messageList, {
			page: msgPage.value,
			pageSize: 10,
			type: type.value,
			tag_id: currentTab.value + 1,
			filter_id: tab.value + 1
		},
			"get"
		)
		.then((res) => {
			if (isInit.value == 1) {
				tabArray.value[0].num = res.data.shareLogUnreadNum
				tabArray.value[1].num = res.data.visitUserUnreadNum
				isInit.value = 0
				msgInfo.value = res.data
			}
			msgPage.value++
			if (res.data.items.length > 0) {
				msgList.value = msgList.value.concat(res.data.items)
			}
			if (msgPage.value <= res.data.pageInfo.totalPage) {
				msgLoading.value = true
			}
			uni.hideLoading()
		});
};
onReachBottom(() => {
	getMsgListData()
})
const type = ref('')
const isInit = ref(1)
onLoad((options) => {
	type.value = options.type ? options.type : ''
	getMsgListData()
})


const goDetail = (item, user_id) => {
	// 当前为@评论我 并且有新消息 标记已读
	// setTimeout(() => {
	isInit.value = 1
	utils
		.request(
			api.messageRead, {
			type: type.value,
			user_id: user_id
		},
			"post"
		)
		.then((res) => {
			// getMsgListData()
			// reloadData()
			item.is_read = 1

		});
	// }, 1000)
	uni.navigateTo({
		url: '/subpackage/message/accessHistroy?user_id=' + user_id
	})
}
const goDetailCard = (item, pid) => {
	// 当前为@评论我 并且有新消息 标记已读
	setTimeout(() => {
		isInit.value = 1
		utils
			.request(
				api.messageRead, {
				type: type.value,
				pid: pid
			},
				"post"
			)
			.then((res) => {
				getMsgListData()
				reloadData()
			});
	}, 1000)


	uni.navigateTo({
		url: '/subpackage/message/accessDetails?pid=' + pid
	})
	// 当前为@评论我 并且有新消息 标记已读




}


const show = ref(false)
const title = ref('一键标记已读');
const content = ref('确定要一键标记所有消息已读吗？');
const confirm = () => {
	show.value = false
	utils
		.request(
			api.messageRead, {
			is_all: 1,
			type: type.value,
		},
			"post"
		)
		.then((res) => {
			tabArray.value[1].num = 0
			tabArray.value[2].num = 0

			reloadData()
		});
}
const cancel = () => {
	show.value = false
}
</script>

<style lang="scss" scoped>
.data {
	width: 690rpx;
	height: 144rpx;
	background: #f8f8f8;
	border-radius: 40rpx;

	.item {
		width: 30%;
		height: 100%;
		border-right: 2rpx solid #f1f1f1;

		.icon {
			width: 10rpx;
			height: 30rpx;
			background: #dbf046;
			border-radius: 6rpx;
		}

		.color {
			background: #1f18ee;
		}
	}

	.item1 {
		width: 30%;
		height: 100%;

		//border-right: 2rpx solid #f1f1f1;
		.icon {
			width: 10rpx;
			height: 30rpx;
			background: #dbf046;
			border-radius: 6rpx;
		}

		.color {
			background: #1f18ee;
		}
	}

	.card {
		width: 216rpx;
		height: 124rpx;
		background: #ffffff;
		border-radius: 40rpx;
	}
}

.btn2 {
	width: 650rpx;
	height: 74rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
	border-radius: 0rpx 0rpx 40rpx 40rpx;
}

.tabBox {
	width: 500rpx;

	// border: 2rpx solid red;
	.tab {
		position: relative;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-right: 20rpx;
		height: 72rpx;
		background: #f8f8f8;
		border-radius: 20rpx;

		.num {
			position: absolute;
			text-align: center;
			top: -8rpx;
			right: 0;
			// width: 44rpx;
			height: 28rpx;
			line-height: 28rpx;
			padding: 0 10rpx;
			font-size: 20rpx;
			background: #ff0000;
			border-radius: 18rpx;
		}
	}

	.active {
		background: #dbf046;
	}
}

.scroll-Y {
	//   border: 2rpx solid red;
	height: 1080rpx;
}

.card3 {
	width: 690rpx;
	// height: 326rpx;
	background: #f8f8f8;
	border-radius: 40rpx;

	.first {
		width: 650rpx;
		background: #ffffff;
		border-radius: 40rpx;

		.hots {
			height: 36rpx;
			background: linear-gradient(180deg, #FFF3EC 0%, #FFFFFF 100%);
			border-radius: 8rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			flex-shrink: 0;
			margin-left: 4rpx;
		}
	}

	.second {
		width: 650rpx;
		// height: 258rpx;
		background: #ffffff;
		border-radius: 40rpx;

		.left {
			flex: 1;

			.one {
				width: 48rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 8rpx;
				color: #fff;
				text-align: center;
				line-height: 36rpx;
				padding: 0 4rpx;
			}
		}

		.right {
			width: 116rpx;
			height: 146rpx;
			background: #ffffff;
			border-radius: 40rpx;
			position: relative;

			.tubiao {
				z-index: 3;
				position: absolute;
				left: 12rpx;
				top: 12rpx;
			}
		}

	}
}

.sift {
	position: relative;

	.card {
		position: absolute;
		z-index: 10;
		// bottom: -210rpx;
		left: -28rpx;
		top: 30rpx;
		//border: 2rpx solid red;
		width: 128rpx;
		height: 420rpx;

		.filter-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 128rpx;
			height: 420rpx;
			z-index: 1;
		}

		.filter-list {
			position: absolute;
			top: 20rpx;
			left: 0;
			width: 128rpx;
			height: 420rpx;
			z-index: 2;
		}

		.item {
			width: 50rpx;
			margin: auto;
			margin-top: 20rpx;
		}

		.act {
			font-weight: 800;
			font-size: 24rpx;
			color: #333333;
		}
	}
}

.btnGroup {
	width: 750rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #f8f8f8;
	padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
	z-index: 99;

	.btn1 {
		//border: 2rpx solid red;
		width: 750rpx;
		height: 118rpx;
		background: #f8f8f8;

		.noRead {
			width: 690rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #dbf046;
		}
	}
}
</style>